<template>
  <div>
    <el-dialog :visible.sync="videoFlag"
               width="30%"
               title="添加视频"
               :close-on-click-modal="false"
               @close="myclose">
      <input type="file"
             id="myfile"
             hidden
             accept="video/quicktime,video/x-mpeg2,video/x-msvideo,video/mpeg,video/mp4"
             multiple
             @change="onFileChange($event)">
      <div class="up_wrap">
        <el-form>
          <el-form-item label="视频路径">
            <el-input v-model="cacheName"></el-input>
          </el-form-item>
          <el-form-item label="视频名称">
            <el-input v-model="vname"></el-input>
          </el-form-item>
          <el-form-item label="视频时长">
            <el-input v-model="vtime"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button v-if="upFlag"
                   type="success"
                   @click="selectVideo">选择视频</el-button>
        <el-button v-if="!upFlag"
                   type="warning"
                   @click="upVideo">上传</el-button>

        <el-button v-if="!upFlag"
                   type="primary">清除</el-button>
      </div>
      <div v-if="sureFlag">
        <el-button type="primary"
                   @click="sureAddVideo">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { upLoadVideoApi, addVideoApi, editVideoApi } from '../../api/video'
import { mapMutations, mapGetters, mapActions, mapState } from 'vuex'
export default {
  name: "videoAlert",
  data () {
    return {
      upFlag: true,
      sureFlag: false,
      cacheName: "",//上传成功后返回的视频路径
      vname: "",//视频名称
      vtime: "",//视频时长
      editId: ""
    }
  },
  watch: {
    editRow (newVal) {
      if (newVal.ID) { //判断是否有编辑内容
        this.sureFlag = true;//显示确定和 取消按钮
        this.cacheName = newVal.Vurl;
        this.vname = newVal.Vname;
        this.editId = newVal.ID;
        this.vtime = newVal.Vtime;
      }
    }
  },
  computed: {
    ...mapState("videoStore", ["editRow"]),//导入修改行数据
    ...mapGetters("videoStore", ["videoFlag"])
  },
  methods: {
    ...mapActions("videoStore", ["getVideoAction"]),
    ...mapMutations("videoStore", ["changeVideoFlag", "changeEditRow"]),
    myclose () {//点击× 关闭弹出层
      this.changeVideoFlag(false)
    },
    onFileChange (e) { //文件上传框的change事件
      e.preventDefault();
      this.upFlag = false;
    },
    selectVideo () { //点击选择视频
      document.getElementById("myfile").click();//打开文件选择
    },
    async upVideo () { //点击上传视频
      var myfiles = document.getElementById("myfile"); //文件上传框
      var formData = new FormData();
      // formData.append(key,value)
      formData.append(new Date().getTime(), myfiles.files[0])
      var res = await upLoadVideoApi(formData)
      console.log(res)
      if (res.success) {
        this.cacheName = res.cacheName;//赋值后端上传成功后返回的视频路径
        this.sureFlag = true;
        this.upFlag = true;
      }

    },
    async sureAddVideo () { //确定添加和修改视频
      if (this.editId) { //如果有修改id  运行修改逻辑
        await editVideoApi({
          ID: this.editId,// 修改传送的修改ID
          Vname: this.vname,
          Vtime: this.vtime,
          Vurl: this.cacheName
        })
        this.changeEditRow({})
      } else {
        await addVideoApi({ //添加视频
          Vname: this.vname,
          Vtime: this.vtime,
          Vurl: this.cacheName
        })
      }
      // 清空输入框
      this.vname = ""
      this.vtime = ""
      this.cacheName = ""
      this.sureFlag = false;
      this.getVideoAction({ pageStart: 1 }) //添加完成获取最新的列表数据
      this.changeVideoFlag(false);//关闭弹出层

    },
    close () {
      this.changeVideoFlag(false);//关闭弹出层
      this.vname = ""
      this.vtime = ""
      this.cacheName = ""
      this.sureFlag = false;
      this.changeEditRow({}) //清空修改行数据
    }
  },
}
</script>
<style lang="less">
</style>